<template>
  <div class="recom-container">
    <div class="icon-area">
      <div class="icon-wrapper">
        <div @click="goServiceInfo(disList[0])">
          <img src="../../assets/img/lease/homestory.png" alt="">
        </div>
        <div @click="goServiceInfo(disList[1])">
            <img src="../../assets/img/lease/jounery.png" alt="">
        </div>
        <div @click="goServiceInfo(disList[2])">
          <img src="../../assets/img/lease/apple.png" alt="">
        </div>
        <div @click="goServiceInfo(disList[3])">
          <img src="../../assets/img/lease/game.png" alt="">
        </div>
      </div>
    </div>
    <div class="hotProduct">
      <div class="pro-ads" v-for="p in promotionlist" :key="p.id">
         <img :src="p.imgFull" alt="推广图">
       </div>
    </div>
    <div class="article-wrapper" v-if="articleList.length>0" @click="goServiceInfo(articleList[0].id)">
      <div class="article">
        <div class="img-area">
          <img :src="articleList[0].imgFull" alt="图标">
        </div>
        <div class="content-area">
          <div class="title">{{articleList[0].title}}</div>
          <div class="message">
             {{articleList[0].introduction}}
          </div>
          <div class="button-area">
            <div class="left-icon">
              {{articleList[0].label}}
            </div>
            <div class="right">
              已有<span>{{articleList[0].browseNum}}</span>人下单租赁
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="people-like">
        <div class="headImg" @click="goCollectPage(collectIds.newProId)">
          <img src="../../assets/img/lease/apple_title.png" alt="头图">
        </div>
        <div class="people-like-content">
            <div class="people-content-item" v-for="i in newProduct" :key="i.id" @click="goDetail(i)">
                <div class="img-content">
                    <img :src="i.imgPro" alt="newproduct">
                </div>
                <div class="people-like-area">
                    <span>[{{i.oldLevelStr}}] {{i.name}}</span>
                    <span>¥&nbsp;{{ i.leaseType == "DAILY" ? (i.displayRent/100).toFixed(2) : (i.displayRent*30/100).toFixed(2)}}/{{i.leaseType == "DAILY" ? "天" : "月"}} 起</span>
                </div>
            </div>
        </div>
    </div>
    <div class="article-wrapper" v-if="articleList.length>0" @click="goServiceInfo(articleList[1].id)">
      <div class="article">
        <div class="img-area">
          <img :src="articleList[1].imgFull" alt="图标">
        </div>
        <div class="content-area">
          <div class="title">{{articleList[1].title}}</div>
          <div class="message">
            {{articleList[1].introduction}}
          </div>
          <div class="button-area">
            <div class="left-icon">
              {{articleList[1].label}}
            </div>
            <div class="right">
              已有<span>{{articleList[1].browseNum}}</span>人下单租赁
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="people-like">
        <div class="headImg" @click="goCollectPage(collectIds.peopleLikeId)">
          <img src="../../assets/img/lease/bacao_title.png" alt="头图">
        </div>
        <div class="people-like-content">
            <div class="people-content-item" v-for="i in peopleLikeProduct" :key="i.id" @click="goDetail(i)">
                <div class="img-content">
                    <img :src="i.imgPro" alt="newproduct">
                </div>
                <div class="people-like-area">
                    <span>[{{i.oldLevelStr}}] {{i.name}}</span>
                    <span>¥&nbsp;{{ i.leaseType == "DAILY" ? (i.displayRent/100).toFixed(2) : (i.displayRent*30/100).toFixed(2)}}/{{i.leaseType == "DAILY" ? "天" : "月"}} 起</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {getHomeData} from "@/api/homepage.js"
export default {
  name: 'recommend',
  data () {
    return {
      mySwiper3: null,
      srcoll: "",
      newProduct: [],
      peopleLikeProduct: [],
      promotionlist: [],
      collectIds: [],
      disList: [],
      articleList: []
    }
  },
  methods: {
    recomData: function(){
      getHomeData().then( data =>{
        if(data.code == 200){
            this.collectIds.peopleLikeId = data.data.popularityOptimizationId;
            this.collectIds.newProId = data.data.newProductId;
            this.newProduct = data.data.newProductList;
            this.articleList = data.data.listFind;
            if(data.data.labelIds){
              this.disList = JSON.parse(data.data.labelIds);
            }
            this.newProduct.forEach(function(item){
               item.imgPro = item.imgFull[0].url + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth/4)*2;
            })
            this.peopleLikeProduct = data.data.popularityOptimizationList;
            this.peopleLikeProduct.forEach(function(item){
              item.imgPro = item.imgFull[0].url + '?x-oss-process=image/format,jpg/interlace,1/quality,q_90/resize,w_' + parseInt(window.innerWidth/2)*2;
            })
            this.promotionlist = data.data.popularizeList;
            this.$store.commit('changeTabChange',0);
            if(this.canUpdate == "update"){
              this.$store.commit('changeCanHomeResize',true);
            }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
      })
    },
    goDetail: function(i){
      this.$router.push({name:'choose' , params: {'id': i.id}});
    },
    goCollectPage: function(id){
      this.$router.push({name:'collectPage' , params: {'id': id}});
    },
    goServiceInfo: function(id){
      this.$router.push({name:'discoverInfo' , params: {'id': id}});
    }
  },
  mounted: function(){
    this.recomData();
  },
  computed: {
    canUpdate(){
        return this.$store.getters.getCateUpdate;
    }
  },
  watch: {
    'canUpdate': function(){
      if(this.canUpdate == "update"){
        this.recomData();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .pro-head {
      height: 18px;
      font-size: 16px;
      line-height: 18px;
      color: #333;
      &>div {
        float: left;
      }
      & .icon {
        background: url('../../assets/img/pers/arrow.png') 0 4px  no-repeat;
        width: 10px;
        height: 18px;
        margin-left: 16px;
        background-size: 68%;
      }
    }
    .recom-container {
      width: 100%;
      height: 100%;
    }
    .hotProduct {
      width: 100%;
      height: 252px;
      & .pro-ads {
        width: 50%;
        height: 50%;
        float: left;
        &>img {
          width: 100%;
          height: 100%;
        }
      }
    }
   .new-product-show {
    margin-top: 10px;
    width: 100%;
    background: #fff;
    & .newTitle {
      width: 100%;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    & #swiper3 {
      width: 100%;
      height: 178px;
      & .product-detail-swiper {
        width: 120px;
        &>.product-img {
          background-color: #F4F7FB;
          height: 120px;
          width: 120px;
          &:first-child {
            margin-left: 12px;
          }
          &>img {
            width:100%;
            height: 100%;
            border: 1px solid #eee;
          }
        }
        &>.product-content {
          font-size: 14px;
          color: #666;
          padding-left: 12px;
          margin-top: 12px;
          text-align: left;
          &>span {
            display: block;
            line-height: 16px;
            &:first-child {
              display:block;
              white-space:nowrap; 
              overflow:hidden;
              text-overflow:ellipsis
            }
            &:last-child {
              margin-top: 7px;
              color: #FF4000;
              font-size: 13px;
              line-height: 15px;
            }
          }
        }
      }
    }
  }
  .people-like {
    background-color: #fff;
    margin-top: 10px;
    padding: 0 12px;
    padding-top: 20px;
    & .headImg {
      margin-bottom: 20px;
      border-radius: 5px;
      &>img {
        width: 100%;
      }
    }
    & .people-like-content {
      width: 100%;
      overflow: hidden;
      & .people-content-item {
        width: 169px;
        float: left; 
        &>.img-content {
          width: 169px;
          height: 169px;
          background-color: #F4F7FB;
          &>img {
            width: 100%;
            height: 100%;
            border: 1px solid #eee;
          }
        }
        &>.people-like-area {
          margin-top: 10px;
          font-size: 14px;
          color: #666;
          &>span {
            display: block;
            line-height: 16px;
            &:first-child {
              display:block;
              white-space:nowrap;
              overflow:hidden;
              text-overflow:ellipsis
            }
            &:last-child {
              margin-top: 7px;
              color: #FF4000;
              font-size: 13px;
              margin-bottom: 18px;
            }
          }
        }
        &:nth-child(odd) {
          margin-right: 11px;
          clear: both;
        }
      }
    }
    & .isOdd {
      margin-left: 13px;
    }
  }
  .icon-area {
    background: #fff;
    height: 85px;
    padding: 0 12px;
    &>.icon-wrapper {
      width: 100%;
      height: 100%;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &>div {
        width: 80px;
        height: 44px;
        &>img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>